import { t } from 'i18next'
import React, { useEffect, useMemo, useState } from 'react'
import { Modal, Search, useSelection } from '@kedacom/react-next'
import { StyledPollModal } from './style'
import { useTvWallStore } from '../store'
import { Avatar } from '@/pages/manager/components'
import { Mt } from '@/api/manager/mt'
import { useGlobalStore } from '@/store/global'
import { useMccStore } from '@/pages/manager/store'

export interface PollModalProps {
	data: Mt[]
	open: boolean
	setOpen: (open: boolean) => void
	callback?: (data: Mt[]) => void
}
export default function PollModal(props: PollModalProps) {
	const { oftenMembers, batchMembers } = useTvWallStore((state) => ({
		oftenMembers: state.oftenMembers,
		batchMembers: state.batchMembers,
	}))
	const { superMtNum } = useMccStore((state) => ({
		superMtNum: state.mccInfo.superMtNum,
	}))
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const { data, open, setOpen, callback } = props
	const [isOften, setIsOften] = useState(false)
	const [searchValue, setSearchValue] = useState('')
	const showData = useMemo(() => {
		let newList = isOften ? oftenMembers : batchMembers
		if (searchValue) newList = newList.filter((item: any) => item.name.indexOf(searchValue) !== -1)
		return newList
	}, [batchMembers, oftenMembers, isOften, searchValue])
	const {
		selectedItems,
		isSelected,
		cancelSelect,
		isChecked,
		isSelectedItemChecked,
		selectedItemChecked,
		itemChecked,
		itemSelect,
		clearChecked,
		clearAllSelected,
		setCheckedToSelected,
		cancelCheckedFromSelected,
		selectAll,
		setSelectedItems,
		sortSelectedItems,
	} = useSelection(batchMembers, 'mtKey')
	useEffect(() => {
		let arr: Mt[] = []
		data.forEach((i) => {
			let item = batchMembers.find((j) => j.account === i.account)
			if (item) arr.push(item)
		})
		setSelectedItems(arr)
	}, [data])
	const okFn = () => {
		callback?.(selectedItems as any)
		setOpen(false)
		reset()
	}
	const reset = () => {
		setSelectedItems([])
		setIsOften(false)
		setSearchValue('')
	}
	return (
		<Modal
			open={open}
			title={t('轮询方编辑')}
			width={848}
			height={678}
			onOk={okFn}
			onCancel={() => {
				setOpen(false)
			}}
			okText={t('确定')}
			cancelText={t('取消')}
		>
			<StyledPollModal className="simple-poll-modal__i18n">
				<div className="transfer-wrap">
					<div className="left-list">
						{!!SWITCH.showOftenMt && superMtNum === 0 && (
							<div className="tab">
								<span
									className={`${!isOften ? 'selected' : ''}`}
									onClick={() => {
										setIsOften(false)
									}}
								>
									{t('全部终端')}
								</span>
								<span
									className={`${isOften ? 'selected' : ''}`}
									onClick={() => {
										setIsOften(true)
									}}
								>
									{t('常用终端')}
								</span>
							</div>
						)}
						<div className={`${!!SWITCH.showOftenMt && superMtNum === 0 ? '' : 'long'} content`}>
							<Search
								iconAlign="left"
								placeholder={t('搜索')}
								value={searchValue}
								onChange={(e, val) => {
									setSearchValue(val)
								}}
							/>
							{showData.map((item, index) => (
								<div
									className={`list-item ${isSelected(item) ? 'selected' : ''} ${
										isChecked(item) ? 'checked' : ''
									} `}
									onClick={(e) => {
										itemChecked(e, item, index, false)
									}}
									onDoubleClick={() => {
										itemSelect(item)
										clearChecked()
									}}
									key={index}
								>
									<span
										className="icon-wrap"
										onClick={(e) => {
											e.stopPropagation()
											itemChecked(e, item, index, true)
										}}
									>
										<span className="icon" />
									</span>
									<Avatar value={item as any} />
									<span className="name" title={item.name}>
										{item.name}
									</span>
								</div>
							))}
						</div>
					</div>
					<div className="transfer-operate">
						<span className="btn all-right" onClick={() => selectAll()} />
						<span className="btn right" onClick={() => setCheckedToSelected()} />
						<span className="btn left" onClick={() => cancelCheckedFromSelected()} />
						<span className="btn all-left" onClick={() => clearAllSelected()} />
					</div>
					<div className="right-list">
						<div className="title">{t('已选{{num}}位', { num: selectedItems.length })}</div>
						<div className="content">
							{selectedItems.map((item, index) => (
								<div
									className={`list-item ${isSelectedItemChecked(item) ? 'checked' : ''}`}
									onClick={(e) => {
										selectedItemChecked(e, item, index, false)
									}}
									onDoubleClick={() => {
										cancelSelect(item)
										clearChecked()
									}}
									key={index}
								>
									<span
										className="icon-wrap"
										onClick={(e) => {
											e.stopPropagation()
											selectedItemChecked(e, item, index, true)
										}}
									>
										<span className="icon" />
									</span>
									<Avatar value={item as any} />
									<span className="name" title={item.name}>
										{item.name}
									</span>
								</div>
							))}
						</div>
					</div>
					<div className="right-operate">
						<span className="btn top" onClick={() => sortSelectedItems('top')} />
						<span className="btn up" onClick={() => sortSelectedItems('up')} />
						<span className="btn down" onClick={() => sortSelectedItems('down')} />
						<span className="btn bottom" onClick={() => sortSelectedItems('bottom')} />
					</div>
				</div>
				<div className="msg">{t('可使用ctrl或shift快捷键进行多选')}</div>
			</StyledPollModal>
		</Modal>
	)
}
